{% extends 'sales/base.html' %}
{% load static %}
{% load thumbnail %}
{% block content%}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'common:doc_list' %}">Documents</a></li>
    <li class="breadcrumb-item" active>View</li>
  </ol>
</nav>

<div class="main_container" id="maincontainer">
  <div class="overview_form_block row marl justify-content-center">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body" id="datashow">
          <div class="panel-heading card-title view-pad text-center">
            <h5>
              Document
            </h5>
            <a href="{% url 'common:edit_doc' doc_obj.id %}" class="btn btn-success edit">Edit</a>
          </div>
          <div class="row marl no-gutters">
            <div class="col-md-8">
              {% if doc_obj.title %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_title" data-name="title">Title</label>
                  <div class="contact_field" id="doc_title" data-name="name">{{ doc_obj.title }} </div>
                </div>
              </div>
              {% endif %}
              {% if doc_obj.status %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_status" data-name="status">Status</label>
                  <div class="contact_field" id="doc_status" data-name="status">{{ doc_obj.status }} </div>
                </div>
              </div>
              {% endif %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_created_by" data-name="created_by">Created By</label>
                  <div class="contact_field" id="created_by" data-name="created_by">{{ doc_obj.created_by }}</div>
                </div>
              </div>
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_created_on" data-name="created_on">Created On</label>
                  <div class="contact_field" id="created_on" data-name="created_on" title="{{ doc_obj.created_on }}">{{ doc_obj.created_on_arrow }}</div>
                </div>
              </div>
              {% with document_users=document.shared_to.all %}
              {% if document_users %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="contact_field_label" for="id_created_on" data-name="created_on">Shared To</label>
                  <br>
                  {% for user in document_users %}
                  {% if user.profile_pic %}
                  {% thumbnail user.profile_pic "40x40" crop="center" as im %}
                  <span>
                    <a href="{% url 'common:view_user' user.id %}">
                      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" title="{{ user.email }}">
                    </a>
                  </span>
                  {% endthumbnail %}
                  {% else %}
                  <span>
                    <a href="{% url 'common:view_user' user.id %}">
                      <img src="{% static 'images/user.png' %}" title="{{ user.email }}" width="40" height="40">
                    </a>
                  </span>
                  {% endif %}
                  {% empty %}
                  None
                  {% endfor %}
                </div>
              </div>
              {% endif %}
              {% endwith %}
            </div>
            <div class="col-md-4">
              <div class="profile_pic">
                {% if doc_obj.document_file %}
                <i class="{{file_type_code}}" aria-hidden="true" style="font-size:3rem;"></i>
                
                <a style="display:block;" href="{% url 'common:download_document' doc_obj.id %}">Download</a></td>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}